<template>
  <h2>这是一个HelloWorld的组件</h2>
  <p>当前组件中的数据:{{ num }}</p>
  <button @click="num++">数字更改</button>
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from "vue"
export default {
  // 组合式api比配置式早执行
  name: "HelloWorld",
  // data() {
  //   return {
  //     msg: "Hello V2",
  //     num: 10,
  //   }
  // },
  setup() {
    let num = ref(20)
    console.log("setup函数执行了..."),
      onBeforeMount(() => {
        console.log("onBeforeMount钩子执行了...")
      })
    onMounted(() => {
      console.log("onMounted钩子执行了...")
    })
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate钩子执行了...")
    })
    onUpdated(() => {
      console.log("onUpdated钩子执行了...")
    })
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount钩子执行了...")
    })
    onUnmounted(() => {
      console.log("onUnmounted钩子执行了...")
    })

    return {
      num,
    }
  },
  beforeCreate() {
    console.log("beforeCreate开始执行了...")
  },
  created() {
    console.log("created开始执行了...")
  },
  beforeMount() {
    console.log("beforeMounte开始执行了...")
  },
  mounted() {
    console.log("mounted开始执行了...")
  },
  beforeUpdate() {
    console.log("beforeUpdate开始执行了...")
  },
  updated() {
    console.log("updated开始执行了...")
  },
  // beforeDestroy(){
  //   console.log('updated开始执行了...')
  // },
  // destroyed(){
  //   console.log('destroyed开始执行了...')
  // }
  beforeUnmount() {
    console.log("beforeUnmounte开始执行了...")
  },
  unmounted() {
    console.log("unmounted开始执行了...")
  },
}
</script>

<style></style>
